<template>
	<view>
		<view class="select-ground" @click="openPicker">
			<view class="item-left">选择代理</view>
			<view class="item-right">
				<view>{{selectGround}}</view>
				<image src="../../static/images/user/group3.png" class="image"></image>
			</view>
		</view>
		<view class="yu-calendar">
			<view class="yu-calendar-header">
				<view class="header-left" @click="prevMonth()">上一月</view>
				<view class="header-center">{{year+'年'+selectMonth}}月</view>
				<view class="header-right" @click="nextMonth()">下一月</view>
			</view>
			<view class="yu-calendar-week">
				<view class="list" v-for="(week,idx) in weeks" :key="idx">{{week}}</view>
			</view>
			<view class="yu-calendar-content">
				<view class="yu-calendar-day">
					<view class="list" v-for="(day,idx) in dayArr" :key="idx" @click="onClick(day,idx)" :style="{background :day.date == localDate?localBgColor:'#f6f6f6',color :
						day.date==localDate?localTextColor:'#000000'}">
						<view class="day" v-if="day.status===1">
							{{day.day}}
						</view>
						<view class="price" v-if="day.price">{{day.price}}</view>
						<view class="order" v-if="day.order">{{day.order}}单</view>
					</view>
					<view class="local-month">{{selectMonth}}</view>
				</view>
			</view>
		</view>
		<uv-picker ref="picker" :columns="columns" keyName="name" @confirm="confirm"></uv-picker>
	</view>
</template>

<script>
	import api from '@/api/index2.js';
	export default {
		data() {
			return {
				orderList: [],
				date: new Date(), //获取系统日期
				localDate: '', //当前日期
				selectMonth: '', //选择的月份
				localBgColor: '#2779fe', //今日的日期背景颜色
				localTextColor: '#ffffff', //今日的日期背景颜色
				weeks: ['日', '一', '二', '三', '四', '五', '六'],
				dayArr: [], //月份天数
				year: '', //当前选择的年
				month: '', //当前选择的月
				status: 1,
				params: {
					year_month: '',
					agent_id: ''
				},
				selectGround: '',
				columns: []
			};
		},
		onLoad(options) {
			this.getAreaList()
			this.year = this.date.getFullYear();
			this.month = this.date.getMonth();
			this.initDate(this.date.getFullYear(), this.date.getMonth());
		},
		methods: {
			openPicker() {
				this.$refs.picker.open();
			},
			confirm(e) {
				this.params.agent_id = e.value[0].id
				this.selectGround = e.value[0].name
				this.initDate(this.year, this.month)
			},
			getAreaList() {
				api.getAgentList().then(res => {
					let columns = [{
						name: "全部",
						id: ""
					}]
					this.columns = [columns.concat(res.data.map(item => {
						return {
							...item,
							name: item.nickname + '-' + item.mobile
						}
					}))];
				});
			},
			//初始化日期
			initDate(year, month) {
				let weekValue = '';
				let localYear = this.date.getFullYear();
				let localMonth = this.date.getMonth() + 1;
				let day = this.date.getDate();
				let totalDay = new Date(year, month + 1, 0).getDate();
				this.dayArr = [];
				this.selectMonth = month + 1;
				this.localDate = this.formatNum(localYear) + '-' + this.formatNum(localMonth) + '-' + this.formatNum(day);
				this.params.year_month = this.formatNum(this.year) + '-' + this.formatNum(this.month + 1)
				api.dailyOrder(this.params).then(res => {
					this.orderList = res.data
					for (let i = 1; i <= totalDay; i++) {
						let dayDate = this.formatNum(year) + '-' + this.formatNum(month + 1) + '-' + this
							.formatNum(i);
						let obj = {
							date: dayDate,
							day: i,
							order: '',
							status: 1
						}
						weekValue = (new Date(year, month, i)).getDay();
						if (i == 1 && weekValue != 0) {
							this.addBeforeValue(weekValue)
						}
						let index = this.orderList.findIndex((item) => {
							return item.date == dayDate
						})
						if (index >= 0) {
							obj.order = this.orderList[index].order;
							obj.price = this.orderList[index].price;
						}
						// //设置点击灰色日期跳转后的默认值
						// if (i == 1 && this.status == 0) {
						// 	obj.bgColor = this.bgColor;
						// 	obj.color = this.color;
						// }
						// if (i == totalDay && this.status == 2) {
						// 	obj.bgColor = this.bgColor;
						// 	obj.color = this.color;
						// }
						this.dayArr.push(obj);
						if (i == totalDay && weekValue != 6) {
							this.addAfterValue(weekValue)
						}
					}
				})
			},
			//补充前面空白日期
			addBeforeValue(weekValue) {
				let totalDay = new Date(this.year, this.month, 0).getDate();
				for (let i = 0; i < weekValue; i++) {
					let obj = {
						date: '',
						day: '',
						order: '',
						status: 0
					}
					obj.day = totalDay - (weekValue - i) + 1;
					this.dayArr.push(obj);
				}
			},
			//补充后空白日期
			addAfterValue(weekValue) {
				let totalDay = new Date(this.year, this.month, 0).getDate();
				for (let i = 0; i < (6 - weekValue); i++) {
					let obj = {
						date: '',
						day: '',
						order: '',
						status: 2
					}
					obj.day = i + 1;
					this.dayArr.push(obj);
				}
			},
			//日期时间的格式化
			formatNum(num) {
				return num < 10 ? '0' + num : num + '';
			},
			//上一个月
			prevMonth() {
				if (this.month == 0) {
					this.year -= 1;
					this.month = 11;
				} else {
					this.month -= 1
				}
				this.initDate(this.year, this.month)
			},
			//下一个月
			nextMonth() {
				if (this.month == 11) {
					this.year += 1;
					this.month = 0;
				} else {
					this.month += 1
				}
				this.initDate(this.year, this.month)
			},
			//输出
			onClick(obj, index) {
				//查询当天的日期下标
				let _this = this;
				let idx = _this.dayArr.findIndex((item) => {
					return item.date == _this.localDate
				})
				if (index === idx) {
					_this.localColor = _this.bgColor;
				} else {
					_this.localColor = '#d4e5ff';
				}
				// if (_this.dayArr[index].status == 0) {
				// 	_this.status = 0;
				// 	_this.prevMonth();
				// 	return;
				// }
				// if (_this.dayArr[index].status == 2) {
				// 	_this.status = 2;
				// 	_this.nextMonth()
				// 	return;
				// }
				if (_this.dayArr[index].status == 1) {
					_this.$nextTick(() => {
						_this.dayArr[index].bgColor = _this.bgColor
						_this.dayArr[index].color = _this.color
					})
					for (let i = 0; i < _this.dayArr.length; i++) {
						if (_this.dayArr[i].status == 1 && i != index) {
							_this.$nextTick(() => {
								_this.dayArr[i].bgColor = 'none'
								_this.dayArr[i].color = '#000'
							})
						}
					}
				}
				const dataObj = {
					date: obj.date,
					day: obj.day,
					order: obj.order
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.empty-box {
		text-align: center;
		margin-top: 80px;
		color: #adadad;

		.image {
			width: 200px;
			height: 200px;
			margin-bottom: 20px;
		}
	}

	.select-ground {
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.item-right {
			display: flex;
			align-items: center;
		}

		.image {
			width: 40rpx;
			height: 40rpx;
		}
	}
</style>

<style scoped>
	.yu-calendar {
		background: #ffffff;
	}

	.yu-calendar-header {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		padding: 12px 15px;
		background: #0086FF;
		color: #fff;
		text-align: center;
	}

	.yu-calendar-header .header-left {
		font-size: 14px;
	}

	.yu-calendar-header .header-center {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		font-size: 16px;
		font-weight: bold;
	}

	.yu-calendar-header .header-right {
		font-size: 14px;
	}

	.yu-calendar-week {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		background: #0086FF;
		color: #fff;
		padding: 0 5px;
	}

	.yu-calendar-week .list {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		font-size: 15px;
		line-height: 40px;
		text-align: center;
	}

	.yu-calendar-day {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		flex-wrap: wrap;
		padding: 20px 5px;
		position: relative;
	}

	.yu-calendar-day .list {
		width: 12.28%;
		min-height: 85px;
		display: flex;
		text-align: center;
		justify-content: space-between;
		flex-direction: column;
		align-items: center;
		border-radius: 5rpx;
		margin: 10rpx 1% 0;
		padding-bottom: 5px;
		padding-top: 5px;
	}

	.yu-calendar-day .list .day {
		display: inline-block;
		border-radius: 18px;
		font-size: 16px;
		text-align: center;
	}

	.yu-calendar-day .list .order {
		font-size: 12px;
		color: #3bdbbe;
	}

	.yu-calendar-day .list .price {
		font-size: 12px;
		margin: 4px 0;
		color: orchid;
		display: flex;
		align-items: center;
		justify-content: center;
		align-items: center;
		flex: 1;
	}

	.yu-calendar-day .local-month {
		position: absolute;
		left: 50%;
		top: 50%;
		z-index: -1;
		font-size: 1px;
		width: 100px;
		height: 140px;
		margin-top: -70px;
		margin-left: -50px;
		text-align: center;
		color: #f5f6f7;
	}
</style>